{% if cart.item_count > 0 %}
  <form action="{{ shop.simplified_url }}/cart" method="post" novalidate>

    <h1 class="h2">{{ 'cart.general.title' | t }}</h1>

    {% for item in cart.items %}
    <div class="cart-row" data-id="{{ item.id }}">
      <div class="grid">

        <div class="grid-item large--seven-twelfths">
          <div class="grid">

            <div class="grid-item one-third large--one-quarter">
              <a href="{{ item.url }}" class="cart-image">
                <img src="{{ item | img_url: 'medium' }}"  alt="{{ item.title | escape }}">
              </a>
            </div>

            <div class="grid-item two-thirds large--three-quarters">
              <a href="{{ item.url }}">
                {{ item.product.title }}
              </a>
              {% unless item.variant.title contains 'Default' %}
                <br>
                <small>{{ item.variant.title }}</small>
              {% endunless %}

              {% if item.properties.size > 0 %}
              <p>
                {% for p in item.properties %}
                  {% unless p.last == blank %}
                    {{ p.first }}:

                    {% if p.last contains '/uploads/' %}
                      <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                    {% else %}
                      {{ p.last }}
                    {% endif %}

                    <br>
                  {% endunless %}
                {% endfor %}
              </p>
              {% endif %}
            </div>

          </div>
        </div>

        <div class="grid-item large--five-twelfths medium--two-thirds push--medium--one-third">
          <div class="grid">

            <div class="grid-item one-half medium-down--one-third text-right">
              <input type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}">
            </div>

            <div class="grid-item one-third medium-down--one-third medium-down--text-left text-right">
              <span class="h2">
                {% include 'price' with item.price %}
              </span>
            </div>

            <div class="grid-item one-sixth medium-down--one-third text-right">
              <a href="{{ shop.simplified_url }}/cart/change?line={{ forloop.index }}&amp;quantity=0" data-id="{{ item.id }}" class="icon-fallback-text btn-secondary remove">
                <span class="icon icon-x" aria-hidden="true"></span>
                <span class="fallback-text">{{ 'cart.general.remove' | t }}</span>
              </a>
            </div>

          </div>
        </div>

      </div>
    </div>

    {% endfor %}

    <div class="cart-row">
      <div class="grid">

        {% if settings.cart_notes_enable %}
          <div class="grid-item large--one-half">
            <label for="cartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
            <textarea name="note" class="input-full" id="cartSpecialInstructions">{{ cart.note }}</textarea>
          </div>
        {% endif %}

        <div class="grid-item text-right {% if settings.cart_notes_enable %}large--one-half{% endif %}">

          <div class="cart-subtotal">
            {{ 'cart.general.subtotal' | t }}
            <span class="h1 cart-subtotal--price">
              {% include 'price' with cart.total_price %}
            </span>
          </div>

          <input type="submit" name="update" class="btn-secondary update-cart" value="{{ 'cart.general.update' | t }}">

          <button type="submit" name="checkout" class="btn">
            <span class="icon icon-cart"></span>
            {{ 'cart.general.checkout' | t }}
          </button>

          {% if additional_checkout_buttons %}
            <p>{{ content_for_additional_checkout_buttons }}</p>
          {% endif %}

        </div>

      </div>
    </div>

  </form>

{% else %}

  <h2>{{ 'cart.general.empty' | t }}</h2>
  <p>{{ 'cart.general.continue_browsing_html' | t }}</p>

{% endif %}
